<template>
  <!-- 盒子 -->
  <div class="box">
    <!-- 头部样式 -->
    <div class="headtit">
      <img src="../../assets/image/形状 1 拷贝 2.png" alt="" class="one" />
      <div class="framebox">
        <div class="frame">非遗文化</div>
        <div class="frame2"></div>
      </div>

      <img src="../../assets/image/形状 1 拷贝 2.png" alt="" class="two" />
    </div>
    <!-- 内容盒子 -->
    <div class="contents">
      <!-- 头部导航 -->
      <div class="daotit">
        <div class="gang"></div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          text-color="#333333"
          active-text-color="#F28623"
          background-color="transparent"
          @select="handleSelect"
        >
          <el-menu-item
            :index="index.toString()"
            v-for="(item, index) in daolists"
            :key="index"
          >
            {{ item }}
            <div class="sanjiao"></div>
          </el-menu-item>
        </el-menu>
        <span>更多+</span>
      </div>
      <div class="botinner" v-if="btntit">
        <div class="inerboxgor" v-for="item in 5" :key="item">
          <img src="../../assets/image/矩形 10 拷贝 5.png" alt="" />
          <p class="textine">中华人民共和国非物质文化遗产法（中华人民共和国主席令第四十二号）</p>
          <p class="time">发布时间：2011</p>
        </div>
      </div>
      <div  class="botinners" v-else>
          <img src="../../assets/image/矩形400.png" alt="">
          <img src="../../assets/image/矩形 550 拷贝.png" alt="">
          <img class="imgs" src="../../assets/image/矩形6.png" alt="">
          <img src="../../assets/image/矩形 550 拷贝 2.png" alt="">
          <img src="../../assets/image/矩形 550 拷贝 2 (1).png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "intangibleculturalheritages",
  data() {
    return {
      btntit: true,
      //导航刷新位置
      activeIndex: "0",
      //导航内容
      daolists: [
        "政策解读",
        "非遗名录",
        "传承人介绍",
        "非遗活动",
        "非遗展厅VR",
      ],
    };
  },
  methods: {
    // 导航事件
    handleSelect(key, keyPath) {
        if(key==0){
            this.btntit=true;
        }else{
            this.btntit=false;
        }
      console.log(key, keyPath);
    },
  },
};
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 855px;
  background-image: url("../../assets/image/矩形背景.png");
  .headtit {
    width: 100%;
    height: 100px;

    .one {
      width: 44.29%;
      position: relative;
      top: 89px;
    }

    .two {
      width: 44.78%;
      position: absolute;
      right: 0;
      margin-top: -80px;
    }

    .framebox {
      margin: 28px auto;
      width: 10.94%;
      height: 80px;

      .frame {
        font-size: 1.56vw;
        color: #333333;
        text-align: center;
        line-height: 75px;
        margin-top: 3px;
        margin-left: -5px;
        position: absolute;
        width: 10.57%;
        height: 75px;
        border: 1px solid #333333;
        border-radius: 13px;
      }

      .frame2 {
        float: left;
        width: 96.66%;
        height: 75px;
        border: 1px solid #333333;
        border-radius: 13px;
      }
    }
  }

  .contents {
    position: relative;
    margin: 0 auto;
    margin-top: 89px;
    width: 72.9%;
    height: 597px;

    .daotit {
      width: 100%;

      .gang {
        z-index: 99;
        position: absolute;
        width: 100%;
        border-bottom: 1px solid #333333;
        margin-top: 60px;
      }

      span {
        position: absolute;
        right: 15px;
        margin-top: -20px;
        color: #333333;
      }
    }

    .botinner {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 89.43%;
      margin-top: 25px;
      .inerboxgor:nth-child(2n) {
        background-color: #F6F5F5;
      }
      .inerboxgor {
        display: flex;
        justify-content:space-between;
        flex-direction:row;
        align-items:center;
        width: 100%;
        height: 20%;
        background-color: white;
        img{
            margin-left: 5.263%;
        }
        .time{
                 margin-right:   3.96%; 
        }
      }
    }
    .botinners{
      display: flex;
      width: 100%;
      height: 89.43%;
      margin-top: 25px;
      background-color: white;
      img{
          width: 10.85%;
          height: 100%;
      }
      .imgs{
          width: 56.64%;
          height: 100%;
      }
    }
  }
}
</style>
<style>
.contents .daotit .el-menu-item {
  font-size: 0.9375vw;
}

.contents.daotit {
  position: relative;
}
.contents .daotit .el-menu-item.is-active {
  border: none;
  font-size: 1.25vw;
}
.contents .daotit .el-menu-item.is-active .sanjiao {
  position: absolute;
  top: 100%;
  left: 45%;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid #f28623;
}

.contents .daotit .el-menu-demo {
  border: none;
  margin-left: 17%;
  width: 90%;
}

.contents .daotit .el-menu-demo .el-menu-item {
  margin-top: 15px;
  width: 13%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-right: 1px solid;
}

.contents .daotit .el-menu-item {
  margin-left: 0;
}

.contents .daotit .el-menu-demo .el-menu-item:nth-child(7) {
  border-right: none;
}
</style>
